<template>
  <view class="block-item">
    <view class="update-pic-container">
      <view class="pic-item" v-for="(item, index) in img_record">
        <image class="del" @click="delImage(index)" src="../../static/images/index/add_cancel.png"></image>
        <image class="pic_other" :src="item"></image>
      </view>
      <view class="pic-item" @click="updateFile" v-if="img_record.length < max">
        <image class="pic" src="../../static/images/index/xiangji.png"></image>
        <view v-if="max > 0" class="upload_text_center">
          <view>图片上传</view>
          <view>({{ img_record.length }}/{{ max }})</view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import HTTP from "@/utils/http"
export default {
  name: "UploadImage",
  props: {
    max: {
      type: Number,
      default: 1
    },
    value: {
      type: String,
    }
  },
  data () {
    return {
      img_record: []
    }
  },
  methods: {
    updateFile () {
      uni.chooseImage({
        count: this.max - this.img_record.length,
        mediaType: ["image"],
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          console.log(res, 'resrrrrr');
          for (let i = 0; i < res.tempFiles.length; i++) {
            HTTP.UPLOAD({
              data: res["tempFiles"][i]["path"],
              success: (data) => {
                let mydata = JSON.parse(data.data);
                let newArr = JSON.parse(JSON.stringify(this.img_record));
                mydata?.data?.linkUrl && newArr.push(mydata?.data?.linkUrl || "");
                this.img_record = newArr
                this.$emit("change", this.img_record.length > 0 ? this.img_record.join(",") : "");
              },
            });
          }
        },
        fail: (err) => console.log(err, 'r')
      });
    },
    delImage (index) {
      this.img_record.splice(index, 1);
      this.$emit("change", this.img_record.length > 0 ? this.img_record.join(",") : "");
    },
  },
  mounted () {
    if (this.$props.value) {
      this.img_record = this.$props.value.split(",") || []
    }
  }
}
</script>

<style scoped>
.block-item {
  margin-bottom: 10rpx;
}

.block-item .item-left {
  padding-top: 15rpx;
  padding-bottom: 10rpx;
}

.textarea-input {
  font-size: 30rpx;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  width: 100%;
  height: 120px;
  border-radius: 4px;
  box-sizing: border-box;
  padding: 10rpx;
}

.update-pic-container {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.pic-item {
  width: 180rpx;
  height: 180rpx;
  position: relative;
  box-sizing: border-box;
  margin-bottom: 15rpx;
  background-color: rgba(185, 188, 191, .3);
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #686B73;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 8rpx;
  margin-right: 10rpx;
}

.pic-item:last-child {
  margin-right: 0rpx;
}

.pic-item .pic {
  width: 44rpx;
  height: 37rpx;
  margin-bottom: 16rpx;
}

.pic-item .pic_other {
  width: 100%;
  height: 100%;
}

.pic-item .del {
  width: 36rpx;
  height: 36rpx;
  position: absolute;
  right: -10rpx;
  top: -10rpx;
}

.cy-int-style {
  width: 100%;
  height: 300rpx;
  border-radius: 4rpx;
  box-sizing: border-box;
  padding: 10rpx;
  margin-top: 15rpx;
  border: 1px solid rgba(255, 255, 255, .5);
}

.upload_text_center {
  text-align: center;
}
</style>